<template>
  <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="item in matchedList" :key="item.path">
        <span>{{ item.meta.title }}</span>
      </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import router from "@/router";

export default {
  name: "BreadCrumb",
  data() {
    return {
      matchedList: []
    }
  },
  watch: {
    $route(value) {
      this.breadcrumb(value)
    },
  },
  created() {
    this.breadcrumb(this.$route)
  },
  methods: {
    breadcrumb(value) {
      /**
       * 三级路由拍平成二级路由面包屑取值方法更改
       */
      const pathArr = value.path.split('/').filter(item => item)
      const topRoutes = router.getRoutes().filter(item => item.path === '/' + pathArr[0])
      let res = []
      const genBreadList = (list) => {
        list.forEach(item => {
          if (item.children && item.children.length) {
            genBreadList(item.children)
          }
          if (pathArr.indexOf(item.path.replace('/', '')) !== -1) {
            res.push(item)
          }
        })
      }
      genBreadList(topRoutes)
      this.matchedList = res.reverse()
    },
  }
}
</script>

<style scoped>

</style>
